<template>
    <div>
        <div
            class="echart-h"
            id="checkReport"
            v-if="['zlzx', 'cm', 'jxdw'].includes(indexCode)"
        ></div>
        <searchner
            @handleSearch="handleSearch"
            @getTableData="getTableData"
            :manageType="manageType"
            :reportWidth="reportWidth"
            ref="checkSearch"
            @downloadFile="downloadFile"
        ></searchner>
        <el-table
            class="mt-10"
            data-table
            v-loading="tableLoading"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(255, 255, 255, 0.2)"
            stripe
            :data="tableData"
            v-if="['zlzx', 'cm', 'jxdw'].includes(indexCode)"
        >
            <el-table-column
                label="序号"
                type="index"
                width="65"
            ></el-table-column>
            <el-table-column property="year" label="年度"></el-table-column>
            <el-table-column
                property="reportType"
                label="报告类型"
            ></el-table-column>
            <el-table-column
                property="objectName"
                label="诊改对象"
            ></el-table-column>
            <el-table-column
                property="state"
                label="编写情况"
            ></el-table-column>
        </el-table>
        <el-table
            class="mt-10"
            data-table
            v-loading="tableLoading"
            element-loading-text="数据加载中..."
            element-loading-background="rgba(255, 255, 255, 0.2)"
            stripe
            :data="jbTableData"
            v-if="indexCode == 'jys' || indexCode == 'bzr'"
        >
            <el-table-column
                label="序号"
                type="index"
                width="65"
            ></el-table-column>
            <el-table-column
                property="studentName"
                label="教师姓名"
            ></el-table-column>
            <el-table-column
                property="orgName"
                :label="indexCode == 'jys' ? '所属二级学院' : '所属学院'"
            ></el-table-column>
            <el-table-column
                property="className"
                :label="indexCode == 'jys' ? '所属教研室' : '所属教班级'"
            ></el-table-column>
            <el-table-column
                property="state"
                label="诊改报告编写状态"
            ></el-table-column>
            <el-table-column
                v-if="indexCode == 'bzr'"
                property="state"
                label="诊改报告审核状态"
            ></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        :disabled="scope.row.state == '未编写'"
                        type="text"
                        @click="lockDetail(scope.row)"
                        >查看明细</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器-->
        <pagination
            v-show="total > 0"
            :total="total"
            :current.sync="page.pageIndex"
            :size.sync="page.pageSize"
            @pagination="pagination"
        />
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {
    getTotalReportInfoList,
    getTotalReportInfoEChart,
    getTotalReportInfoListExport,
    getReportInfoList,
    getReportInfoListExport,
    getTeacherReportInfoListExport
} from '@/api/cockpit';
import { mapState } from 'vuex';
import bus from '@/config/bus';
import { dataZoom } from '@/config/common';

export default {
    name: 'CheckReport',
    props: {
        manageType: {
            required: true,
            type: String,
            default: ''
        }
    },
    computed: {
        ...mapState({
            indexCode: state => state.cockpit.indexCode,
            code: state => state.cockpit.code,
            year: state => state.cockpit.year,
            stateVal: state => state.cockpit.stateVal
        })
    },

    data () {
        return {
            page: {
                pageIndex: 1,
                pageSize: 10
            },
            reportWidth: 160,
            total: 0,
            tableData: [],
            // 教研室班主任驾驶舱
            jbTableData: [],
            searchParams: {},
            echartCode: null,
            echartState: null,
            chartReportType: null,
            // 下载文件类型 init 为重置或初始，search为查询时下载类型，ecchart为点击echart时下载类型
            tableDataType: 'init',
            tableLoading: false
        };
    },
    mounted () {
        if (['zlzx', 'cm', 'jxdw'].includes(this.indexCode)) {
            this.initEchart();
        }
        this.getTableData('init');
    },
    methods: {
        initEchart () {
            if (['bzr', 'jys'].includes(this.indexCode)) return;
            var chartDom = document.getElementById('checkReport');
            var myChart = echarts.init(chartDom);
            this.common.load(myChart);
            getTotalReportInfoEChart({
                year: this.year,
                indexCode: this.indexCode,
                code: ['cm'].includes(this.indexCode) ? this.code : null,
                orgId: ['jxdw'].includes(this.indexCode) ? this.code : null
            }).then(res => {
                var option;
                option = { ...this.common.clinicalChangeOption };
                option.dataZoom = dataZoom
                option.title.text = '诊改报告占比';
                option.tooltip.formatter = params => {
                    // console.log(params, 'tool');
                    let str = `${params[0].name}<br>`;
                    if (res.z) {
                        res.z.map(child => {
                            if (params[0].name === child.name) {
                                // console.log(child, 'child');
                                str += `总数量 ${child.total}份<br>
                                未完成编写数量 ${child.noEdit}份<br>
                                已完成编写数量 ${child.edit}份<br>
                                未审核数量 ${child.noCheck}份<br>
                                已审核数量 ${child.check}份<br>
                                `;
                            }
                        });
                    }
                    for (let i = 0; i < params.length; i++) {
                        str += `${params[i].marker}
                            ${params[i].seriesName}
                            ${params[i].data}%<br>`;
                    }
                    // ${this.common.totalEle} 总数 ${Number(params[0].data) + Number(params[1].data)}个<br>
                    return str;
                };
                option.xAxis[0].data = res.x || [];
                option.xAxis[0].axisLabel = {
                    interval: 0,
                    formatter: params => {
                        return this.common.formatterAxisLabel(params);
                    }
                };
                const nameArr = ['报告完成率', '报告审核率'];
                const datas = res.y || [];
                option.legend.data = nameArr;
                option.series = [];
                for (let i = 0; i < datas.length; i++) {
                    option.series.push({
                        name: nameArr[i],
                        type: 'bar',
                        barWidth: '50px',
                        tooltip: {
                            valueFormatter: value => value + ' %'
                        },
                        data: datas[i]
                    });
                }
                // 1、清除画布
                myChart.clear();
                myChart.hideLoading();
                // 2、调用setOption
                option && myChart.setOption(option);
            });

            // 3、在渲染点击事件之前先清除点击事件
            myChart.off('click');
            // triggerEvent为true时，触发点击事件
            myChart.on('click', params => {
                console.log(params);
                const state = this.common.reportTypeOption.find(item => {
                    if (item.label === params.name) {
                        return item.value;
                    }
                });
                console.log(state, 'type');
                this.chartReportType = state.value;
                this.tableDataType = 'echart';
                this.$refs.checkSearch.resetQueryParam();
                this.getTableData('echart');
            });
        },
        handleSearch (params, isSearch, empty) {
            if (isSearch === 'init') this.page.pageIndex = 1;
            console.log(params, isSearch, 'ab');
            this.tableDataType = isSearch;
            this.searchParams = { ...params };
            this.getTableData(isSearch);
        },
        // 获取参数
        getParams (searchType) {
            console.log(searchType, 'searchType2');
            const defaultParam = {
                code: ['cm'].includes(this.indexCode) ? this.code : null,
                indexCode: this.indexCode,
                year: this.year,
                ...this.page,
                // 教研室/班主任诊改驾驶舱所需所属 班级/教研室ID
                classId: ['jys', 'bzr'].includes(this.indexCode)
                    ? this.code
                    : null
            };
            let params;
            if (searchType === 'init') {
                params = {
                    ...defaultParam,
                    orgId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                    init: 'init'
                };
            }
            if (searchType === 'search') {
                if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                    params = {
                        ...defaultParam,
                        ...this.searchParams,
                        code: ['cm'].includes(this.indexCode)
                            ? this.searchParams.indexX
                            : null,
                        angle: this.searchParams.rectificationRangeId,
                        state: this.searchParams.writeInfo,
                        orgId: this.searchParams.belongTwoLevelSchool,
                        search: 'search'
                    };
                }
                if (this.indexCode === 'jys' || this.indexCode === 'bzr') {
                    params = {
                        ...defaultParam,
                        ...this.searchParams,
                        orgId: this.searchParams.belongTwoLevelSchool,
                        state: this.searchParams.editStatus,
                        search: 'jys/bzr'
                    };
                }
            }
            if (searchType === 'echart') {
                params = {
                    ...defaultParam,
                    state: this.echartState,
                    code: this.echartCode,
                    reportType: this.chartReportType,
                    orgId: ['jxdw'].includes(this.indexCode) ? this.code : null,
                    echart: 'echart'
                };
            }
            return params;
        },
        // searchType: 'search' 为查询参数 ，'init' 为初始参数,'echart' 为echarts查询参数
        getTableData (searchType) {
            this.tableLoading = true;
            if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                getTotalReportInfoList(this.getParams(searchType)).then(res => {
                    this.tableData = res.dataList;
                    this.total = res.total;
                    this.tableLoading = false;
                });
            }
            if (this.indexCode === 'jys' || this.indexCode === 'bzr') {
                getReportInfoList(this.getParams(searchType)).then(res => {
                    this.jbTableData = res.dataList;
                    this.total = res.total;
                    this.tableLoading = false;
                });
            }
        },
        // 下载文件 downloadType: true 为查询参数 ，否则为初始参数
        downloadFile () {
            if (['zlzx', 'jxdw', 'cm'].includes(this.indexCode)) {
                getTotalReportInfoListExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    this.downFile(res);
                });
            }
            if (this.indexCode === 'jys') {
                getTeacherReportInfoListExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    this.downFile(res);
                });
            }
            if (this.indexCode === 'bzr') {
                getReportInfoListExport(
                    this.getParams(this.tableDataType)
                ).then(res => {
                    this.downFile(res);
                });
            }
        },
        downFile (res) {
            this.common.downloadFile(res, {
                name: `${this.year}年${this.manageType}`,
                fileType: '.xlsx'
            });
            this.$refs.checkSearch.downloading = false;
        },
        // 分页器参数回传方法
        pagination (page) {
            console.log(page, 'params');
            this.page = page;
            this.getTableData(this.tableDataType);
        },
        lockDetail (item) {
            if (item.state === '未编写' || !item.reportId) return;
            const el = document.getElementsByClassName('mainContent')[0];
            el.style.background = '#fff';
            this.$router.push({
                path: `/report/reportManage/cardDetail/${item.reportType}`,
                query: {
                    id: item.reportId,
                    title: `${item.reportName}`,
                    isBack: true
                }
            });
        },
        reset () {
            this.$refs.checkSearch.reset();
        }
    }
};
</script>
